<!-- eslint-disable camelcase -->
<template>
  <div class="full-width-height">
    <Form
      :model="G_formItem"
      :label-width="80"
      label-colon
      :disabled="G_baseDisabled"
      class="form"
    >
      <FormItem label="名 称" class="formItem">
        <Input
          v-model="G_formItem.name"
          :readonly="G_readonly.name"
          placeholder="无内容"
        />
      </FormItem>
      <Row>
        <FormItem label="输入参数" class="formItem">
          <Input
            v-model="G_formItem.inArg"
            :readonly="G_readonly.inArg"
            placeholder="无内容"
          />
        </FormItem>
        <FormItem label="输出参数" class="formItem">
          <Input
            v-model="G_formItem.outArg"
            :readonly="G_readonly.outArg"
            placeholder="无内容"
          />
        </FormItem>
      </Row>
      <FormItem label="说 明" class="formItem">
        <Input
          v-model="G_formItem.explain"
          type="textarea"
          :readonly="G_readonly.explain"
          :autosize="{ minRows: 2, maxRows: 5 }"
          placeholder="无内容"
        />
      </FormItem>
    </Form>
  </div>
</template>
<script lang="ts">
import { ifs, ts, Tsrv, T_srv, vue } from '@/services';
import { I_compConf, T_resources, I_ruleLibData } from '../config';

@T_srv.comp
export default class TFunction extends vue {
  @T_srv.prop({ required: true }) config: I_compConf;

  // 父组件compBoxInfo
  @T_srv.prop({
    required: false,
    type: Object,
    default: null
  })
  compBoxInfo: ifs.I_compBoxInfo;

  private GT_compBox: ifs.I_compBox;

  private G_compID: string;

  private GT_compBoxInfo: ifs.I_compBoxInfo;

  private G_formItem: T_resources = {
    name: '',
    input_arg: '',
    output_arg: '',
    f_comment: ''
  };

  private G_readonly: object = {
    name: true,
    inArg: true,
    outArg: true,
    explain: true
  };

  private G_baseDisabled: boolean = false;

  created() {
    this.G_compID = Tsrv.utils.getGUID();
    // 如果外部有传入组件信息
    if (Tsrv.utils.isEmpty(this.compBoxInfo)) {
      this.GT_compBox = new ts.T_compBox(this.G_compID); // 使用本地实例
    } else {
      this.G_compID = this.compBoxInfo.compID;
      this.GT_compBox = this.compBoxInfo.TcompBox;
    }
    this.GT_compBoxInfo = { compID: this.G_compID, TcompBox: this.GT_compBox };
    this.G_formItem = this.config.data;
  }

  mounted() {
    this.$emit('compBoxInfo', this.GT_compBoxInfo);
    if (this.config.name !== '') {
      this.GT_compBox.addCompMergeName(this.G_compID, this.config.name, this);
    }
  }

  destroyed() {
    this.GT_compBox.removeCompMergeName(this.G_compID, this.config.name);
  }

  changeData(data: I_ruleLibData) {
    this.G_formItem = data;
  }
}
</script>
<style lang="scss" scoped>
.formItem {
  margin-bottom: 6px;
}
.form {
  padding-top: 6px;
}
</style>
